@import '@bifrostui/styles/mixins/index.less';

.bui-slider {
  --line-color: var(--bui-slider-line-color, var(--bui-color-primary));
  --line-bg-color: var(
    --bui-slider-line-bg-color,
    var(--bui-color-border-default)
  );
  --width: var(--bui-slider-width, 100%);
  --height: var(--bui-slider-height, 2px);
  --padding: var(--bui-slider-padding, 19px 0);
  --button-width: var(--bui-slider-button-width, 26px);
  --button-height: var(--bui-slider-button-height, 26px);
  --button-font-size: var(
    --bui-slider-button-font-size,
    var(--bui-title-size-3)
  );
  --button-border-radius: var(--bui-slider-button-border-radius, 50%);
  --tooltip-width: var(--bui-slider-tooltip-width, 46px);
  --tooltip-height: var(--bui-slider-tooltip-height, 24px);
  --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
  --tooltip-border-radius: var(--bui-slider-tooltip-border-radius, 24px);
  --tooltip-font-size: var(--bui-tooltip-font-size, var(--bui-text-size-3));
  --tooltip-color: var(--bui-tooltip-color, var(--bui-color-white));
  --tooltip-bg-color: var(--bui-tooltip-bg-color, var(--line-color));

  position: relative;
  width: var(--width);
  height: var(--height);
  padding: var(--padding);
  box-sizing: border-box;
  font-family: var(--bui-font-family);

  &-disabled {
    pointer-events: none;
    opacity: 0.5;
  }

  &-line {
    position: absolute;
    top: 50%;
    left: 0;
    height: var(--height);
    transform: translateY(-50%);
    background-color: var(--line-color);
  }

  &-rail {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: var(--height);
    transform: translateY(-50%);
    background-color: var(--line-bg-color);
  }

  &-button {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--bui-color-white);
    box-shadow: #ddd 0 0 10px;
    border-radius: var(--button-border-radius);
    transform: translate(-50%, -50%);
    font-size: var(--bui-title-size-3);
    cursor: grab;

    // 增加点击热区大小
    &::after {
      position: absolute;
      content: '';
      top: -10px;
      bottom: -10px;
      left: -10px;
      right: -10px;
    }

    &-0 {
      left: 0%;
      top: 50%;
      z-index: var(--bui-z-index-affix);
    }

    &-1 {
      left: 0%;
      top: 50%;
      z-index: var(--bui-z-index-affix);
    }
  }

  &-tooltip {
    position: absolute;
    top: -14px;
    width: var(--tooltip-width);
    height: var(--tooltip-height);
    line-height: var(--tooltip-line-height);
    font-size: var(--tooltip-font-size);
    border-radius: var(--tooltip-border-radius);
    color: var(--tooltip-color);
    text-align: center;
    background-color: var(--tooltip-bg-color);
    transform: translate(-50%, -50%);
    z-index: var(--bui-z-index-popover);

    &::after {
      position: absolute;
      bottom: -10px;
      left: 0;
      right: 0;
      margin: 0 auto;
      content: '';
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-top: 6px solid var(--tooltip-bg-color);
    }

    &-hidden {
      display: none;
    }
  }
}
